<template>
    <div class="main">
        <div ref="chartRef" class="chart"></div>
    </div>
</template>

<script>
import * as echarts from "echarts";

export default {
    name: "PieChart",
    data() {
        return {
            chart: null,
            option: {
                tooltip: {
                    trigger: "item",
                    formatter: "{b}: {d}%", // 鼠标悬停时显示百分比
                },
                legend: {
                    show: true,
                    orient: "vertical", // 设置图例为垂直排列
                    left: "left",
                    //   top: "center",
                    itemWidth: 15, // 设置每个图例项的宽度
                    itemHeight: 10, // 设置每个图例项的高度
                    itemGap: 5, // 设置每行图例项之间的间隔
                    textStyle: {
                        fontSize: 11, // 设置字体大小
                        color: "#fff", // 设置字体颜色
                    },
                    formatter: (name) => {
                        return name; // 显示图例名称
                    },
                    // 设置图例布局，确保每行显示两个项
                    grid: {
                        containLabel: true,
                        left: "left",
                        right: "right",
                        bottom: "10%",
                        top: "top",
                        column: 2, // 每行显示两个legend
                    },
                },
                series: [
                    {
                        name: "企业类型",
                        type: "pie",
                        radius: "55%",
                        radius: ["30%", "60%"],
                        center: ["65%", "40%"], // 图形居中
                        data: [
                            { value: 0.04, name: "城镇社区" },
                            { value: 0.60, name: "高等教育单位" },
                            { value: 0.30, name: "个体工商户" },
                            { value: 46.23, name: "国有企业" },
                            { value: 0.56, name: "机关" },
                            { value: 1.90, name: "科研设计单位" },
                            { value: 5.07, name: "其他（含社会组织等）" },
                            { value: 36.68, name: "其他企业（含民营企业等）" },
                            { value: 0.86, name: "其他事业单位" },
                            { value: 6.94, name: "外商投资企业" },
                            { value: 0.11, name: "医疗卫生单位" },
                            { value: 0.71, name: "中初教育单位" }
                        ],
                        itemStyle: {
                            color: (params) => {
                                const colorList = [
                                    "#f9ac1b",
                                    "#fd6c93",
                                    "#2185ff",
                                    "#2F4F96",
                                    "#ff9037",
                                    "#4E9F3D",
                                    "#9B1B30",
                                ];
                                return colorList[params.dataIndex % colorList.length]; // 根据顺序循环颜色
                            },
                        },
                        label: {
                            show: true,
                            position: "outside", // 将标签放置在扇区外部
                            formatter: "{d}%", // 显示百分比
                            color: "#fff", // 设置标签颜色
                            fontSize: 14, // 增加字体大小
                        },
                        labelLine: {
                            show: true, // 显示连接线
                            length: 15, // 连接线的长度
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)",
                            },
                        },
                    },
                ],
            },
        };
    },
    mounted() {
        this.initChart();
        window.addEventListener("resize", this.handleResize);
    },
    beforeDestroy() {
        window.removeEventListener("resize", this.handleResize);
        this.chart && this.chart.dispose();
    },
    methods: {
        initChart() {
            // 初始化图表
            this.chart = echarts.init(this.$refs.chartRef);
            this.chart.setOption(this.option);
        },
        handleResize() {
            this.chart && this.chart.resize();
        },
    },
};
</script>

<style scoped>
.chart {
    width: 95%;
    height: 95%;
    position: relative;
}

.main {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #0b1f42;
}
</style>
